Digital Social Innovation Phase 2: UX/UI (Group Project)
Project Brief
Continuing from ILL 301.4, this second phase of the digital social innovation project required the execution of the ideas conceptualised in phase 1. Phase 2 required the execution of the conceptualised minimum viable product. Using wireframes and user testing, a digital product had to be created that functions as an operational digital prototype of the platform. This had to showcase the chosen user flow and the primary functions of the platform.
Project Deliverables
1. Pitch Deck of Slides 9-11 Containing:
- User testing and paper prototyping
- Description of digital solution
- Final prototype
2. Wireframes
3. Digital Prototype
4. Final Digital Designs
5. Style Guide
6. Development of Process and Conceptualisation
Design Strategy
Digital design begins with a user-testing process in a paper format. With the intention of manifesting a digital, social innovation in the form of a Progressive Web App (PWA), paper prototype tests were handed out to students all around the campus of the University of Pretoria. This method provides quick feedback that can be used by the designer for further brainstorming. The designer can then improve the user-journey and thus achieve more effective design solutions. Using the insight into user thinking and behaviour provided by paper prototyping, one can now achieve high fidelity wireframes. High fidelity wireframes ensure the platform serves its promised service for its specific target audience effectively enough to be regarded a digital social innovation.
The Blueprint Progressive Web App (PWA) is a platform for South African farmers and fishermen to report threats and violations to freshwater sources in their local areas.
Pitch Deck Slides
In this phase of the project, we added three new slides to the pitch deck detailing the user testing, prototyping and creation of our Progressive Web App.
Wireframe Development
When developing the final prototype, designs went through the rough sketching phase before being developed into rough digital wireframes for user testing. Finally the designs were finalised for the digital prototype. Below shows a summary of this process, for all process work, please see our figma process work file.
User Testing
After designing our low fidelity wire-frames, we decided to user test those designs with a number of other students around campus to get an idea of how the designs translated to people viewing them for the first time, and what worked in the app, as well as what didn't work in the app. Using this feedback we were able to improve our overall usability and design of the app.
Digital Prototype
Final Designs
Style Guide and Visual Development
Logo
The logo represents the four freshwater ecosystem types: wetlands, rivers, groundwater and dams in a simple yet elegant manner. Initial concept ideas were inspired by the Celtic line style of balance, to commuicate unity. Water connects us all. Inspiration also came from topographic lines as they link back to the literal idea of a “Blueprint”, and how it puts a plan into action.
Grid
The 4 column grid has margins and gutters of 24 px to allow for touch friendly spacing for all people. The rows are an 8px rhythm to comply with UX/UI conventions.
Colours
The main colour scheme for the website is made up of predominantly blue variations which gives The Blueprint it’s unique identity and links to the idea of water. The secondary colour palette, which is used for illustrations is made up of a triadic blue, green and purple palette. This offers variation throughout the site, ties in with the identity of The Blueprint Organisation, and is reminiscent of freshwater landscapes.
Typography
Icons
The site’s icons follow standard UX/UI conventions to make it easy to identify their function.
Components
A variety of buttons are used throughout the site. The different button styles indicates to users what the primary or secondary actions are on each page.
Illustrations
Illustrations form The Blueprint’s main visual identity. The simple vector style creates an approacheable feel. Various opacity overlays can be used to create shadows and highlights. Simplified, bold shapes create continuity throughout the site’s illustrations.
